<template>
	<view class="icon-box">
		<view class="icon-item" v-for="(v, i) in iconArr" :key="i">
			<!-- #ifdef MP-WEIXIN -->
			<block v-if="v.type == 'forward'">
				<view class="df-ai-cen" @click="iconBtn(v)">
					<image :src="$util.posUrl(v.icon) ? v.icon : staticImgUrl + v.icon" mode="" :style="{ width: size + 'rpx', height: size + 'rpx' }"></image>
					<text>{{ v.val }}</text>
				</view>
			</block>
			<!-- <block v-if="v.type == 'share'">
				<button class="toolbar-share" open-type="share">
					<view><image :src="staticImgUrl + 'live/forward_icon.png'" mode="" class="toolbar-icon"></image></view>
				</button>
			</block> -->
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="df-ai-cen" @click="iconBtn(v)">
				<image :src="$util.posUrl(v.icon) ? v.icon : staticImgUrl + v.icon" mode="" :style="{ width: size + 'rpx', height: size + 'rpx' }"></image>
				<text>{{ v.val }}</text>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {}
	},
	props: {
		iconArr: {
			type: Array,
			default: () => {
				return [
					{
						type: 'forward',
						icon: 'home/give_icon.png',
						name: '点赞',
						val: 11
					},
					{
						type: 'forward',
						icon: 'home/collection_icon.png',
						name: '收藏',
						val: 11
					},
					{
						type: 'forward',
						icon: 'home/comment_icon.png',
						name: '评论',
						val: 11
					},
					{
						type: 'share',
						icon: 'home/forward_icon.png'
					}
				]
			}
		},
		size: {
			type: Number,
			default: 48
		}
	},
	methods: {
		iconBtn(v) {
			this.$emit('iconCall', v)
		}
	}
}
</script>

<style lang="scss">
.icon-box {
	display: flex;
	justify-content: flex-end;
	.icon-item {
		margin-left: 22rpx;
	}
}
.toolbar-share {
	padding: 0;
	line-height: 1;
	background-color: transparent;
}
// button {
// 	background-color: transparent; //可根据自己的背景颜色自行设置
// 	border-radius: 0rpx;
// 	padding: 0rpx;
// 	margin: 0rpx;
// 	display: inline-block;
// 	line-height: 1;
// }

// button::after {
// 	/*button的边框样式是通过::after方式实现的*/
// 	border: none;
// }

// .button-hover {
// 	/*点击后样式*/
// 	color: #000;
// 	background-color: rgb(247, 247, 247);
// }
// .three-login {
// }
</style>
